<template>
	<view class="main"> <!--关注列表-->
		<view class="addFollow" @click="addFollow" >
			<view class="peoInfo">
				<image src="@/static/images/add.png" style="width:100rpx;" mode='widthFix'></image>
				<view class="info">
					<view class="tit">添加关注</view>
					<view>您最多可关注10位家人</view>
				</view>
			</view>
			<image src="@/static/images/follow_p.png" style="width:180rpx;" mode='widthFix'></image>
		</view>
		
		<view class="followList" @click="detail(item)" v-for="item in myRelationList">
			<view class="follows">
				<image src="@/static/images/follow_p.png"  style="width:130rpx;" mode='widthFix'></image>
				<view class="userInfo">
					<view class="tit">{{item.name}}</view>
					<view>手机号：{{item.mobile}}</view>
					<view>身份证号：{{item.cardId}}</view>
				</view>
			</view>
			<view class="cancel" @click.stop="cancelRelation(item)">取消关注</view>
		</view>
	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myRelationList:[]
			}
		},
		onLoad(e){
			this.getList();
		},
		methods: {
			detail(item){
				uni.navigateTo({
					url:`/pages/userInfo/userInfo?id=${item.id}`
				})
			},
			addFollow(){
				if(this.myRelationList && this.myRelationList.length>=10){
					this.$tools.msg("您最多可关注10位家人！")
					return;
				}
				uni.navigateTo({
					url:"/pages/addUser/addUser"
				})
			},
			getList(){
				uni.showLoading({
					title:"加载中"
				})
				this.$http.myRelation().then(res=>{
					if(res.code==0){
						this.myRelationList = res.list;
					}
					console.log(res)
					uni.hideLoading()
				})
			},
			cancelRelation(item){
				uni.showModal({
					title: '提示',
					content: '确定取消关注'+item.name+'？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$http.cancelRelation({infoId:item.id}).then(res=>{
							if(res.code==0){
								this.$tools.msg("取消成功");
								this.getList();
							}else{
								this.$tools.msg(this.$msg.getMsgCN(res.msg));
							}
						})
						
					} else {  
						console.log('cancel') //点击取消之后执行的代码
					}  
					} 
				})
				
				
			}
		}
	}
</script>

<style scoped>
	.main{overflow: hidden;min-height: 100vh;background-color: #e7fcf5;
		box-sizing: border-box;
	}
	.addFollow{
		background-color: #e1fbf2;
		margin:30rpx 0;
		display: flex;
		border-radius: 16rpx;
		padding:30rpx;
		justify-content: space-between;
		align-items: center;

	
	
	
	}
	.addFollow .peoInfo{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.addFollow .peoInfo .info{
		margin-left:20rpx;
		color:#0fa26e;
		font-size:26rpx;
	}
	.addFollow .peoInfo .tit{
		font-size:34rpx;
		padding-bottom: 8rpx;
	}

	.followList{
		background-color: #fff;
		margin:0 0 24rpx 0;
		display: flex;
		border-radius: 16rpx;
		padding:30rpx;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.followList .follows{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.followList .cancel{
		background:#0ea26e;
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 56rpx;
		height:56rpx;
		padding:0 16rpx;
		flex-shrink: 0;
		position:absolute;
		right:30rpx;
	}
	.followList .userInfo{
		padding-left:20rpx;
		color:#8f8f8f;
		display: block;
		padding-top:0;
		
	}
	.followList .userInfo .tit{
		color:#000;
		font-size:34rpx;
		margin-bottom:6rpx;
	}

</style>
